<template>
  <page-header-wrapper :title="false">
    <a-card title="数据统计">
      <a-tabs v-model="tab" type="card" @change="onTabs">
        <a-tab-pane v-for="item in categoryOpts" v-if="item.count != 0" :key="item.business_id">
          <span slot="tab">{{item.name}}({{item.count}})</span>
        </a-tab-pane>
      </a-tabs>
      <div>
        <a-descriptions title="入职以来的统计数据" :column="columnsNum1" layout="vertical" bordered>
          <a-descriptions-item v-for="item in businessData1" :key="item.business_id">
            <template slot="label">
              <div :style="{ width: '200px' }">
                <a @click="onChart(item.business_id, item.name)">{{item.name}} </a>
              </div>
            </template>
            <a-tag color="red" @click="onModal(item.business_id, item.name)">{{item.num}}</a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-card>
    <a-card :bordered="true" style="margin-top: 20px">
      <a-month-picker v-model="currentMonth" :disabled-date="disabledDate" placeholder="选择月份" @change="changeMonth" />
      <div style="margin-top: 20px">
        <a-descriptions title="单月统计数据" :column=columnsNum2 layout="vertical" bordered>
          <a-descriptions-item v-for="item in monthData" :key="item.business_id">
            <template slot="label">
              <div :style="{ width: '200px' }">{{item.name}}</div>
            </template>
            <a-tag color="red" @click="onModal1(item.business_id, item.name)">{{item.num}}</a-tag>/ {{item.max_num}}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-card>
    <business-modal v-if="visibleModal" :title="currentTitle" :business-id="businessId" :month="currentMonth" @cancel="onCancelModal"></business-modal>
    <business-chart v-if="visibleChart" :title="currentTitle" :business-id="businessId" @cancel="onCancelChart"></business-chart>
  </page-header-wrapper>
</template>

<script>
  import moment from 'moment'
  import { STable, Ellipsis } from '@/components'
  import BusinessModal from './components/BusinessModal'
  import BusinessChart from './components/BusinessChart'
  import { getBusinessCount, getCategory, getMonthData } from '@/api/adviser'
  export default {
    components: {
      BusinessChart,
      STable,
      Ellipsis,
      BusinessModal
    },
    name: 'Data',
    data () {
      return {
        categoryOpts: {},
        columnsNum1: 15,
        columnsNum2: 15,
        visibleModal: false,
        visibleChart: false,
        currentTitle: '',
        businessData1: [],
        businessData2: [],
        tab: 10,
        businessId: '',
        currentMonth: moment(new Date(), 'YYYY-MM'),
        monthData: []
      }
    },
    created () {
      this.getTab()
      this.getMonth(moment(moment(new Date(), 'YYYY-MM')).format('YYYY-MM'))
    },
    methods: {
      moment,
      getTab () {
        getCategory().then(res => {
          if (res.status === 0) {
            this.categoryOpts = res.result.dataCount
            this.getCount(this.tab)
          }
        })
      },
      getCount (id) {
        getBusinessCount(id).then(res => {
          this.businessData1 = res.result.data
          this.columnsNum1 = res.result.data.length
        })
      },
      getMonth (month) {
        getMonthData(month).then(res => {
          this.columnsNum2 = res.result.data.length
          this.monthData = res.result.data
        })
      },
      onModal (id, title) {
        this.businessId = id
        this.currentTitle = title
        this.visibleModal = true
      },
      onModal1 (id, title) {
        this.businessId = id
        this.currentTitle = title
        this.visibleModal = true
      },
      onCancelModal (visible) {
        this.visibleModal = visible
      },
      onChart (id, title) {
        this.currentTitle = title
        this.businessId = id
        this.visibleChart = true
      },
      onCancelChart (visible) {
        this.visibleChart = visible
      },
      onTabs (key) {
        this.tab = key
        this.getCount(this.tab)
      },
      changeMonth (date, dateString) {
        this.getMonth(dateString)
      },
      disabledDate (current) {
        return current && current > moment().endOf('day')
      }
    }
  }
</script>

<style scoped>
  /deep/ .ant-descriptions-view {
    overflow-x: scroll;
  }
</style>
